<template>
    <!-- 最外层只能有一个组件，不能出现多个 -->
    <div class="zlst-components-uploadFile-uploadFirstStep">
        <div class="form-item">
            <div class="form-title-left">导入文件格式</div>
            <div class="form-input-left">
                <Select  placeholder="请选择上传文件格式" class="select-type" v-model="fileTypeValue" @on-change="changeFileType">
                    <Option :value="fileTypeObj.fileruleId" v-for="(fileTypeObj, index) in uploadTypeObjectList" :key="index">{{fileTypeObj.fileExtension}}</Option>
                </Select>
                <div>
                    <a :href="downloadUrl">下载模板</a>
                </div>

            </div>
        </div>

        <div class="form-item">
            <div class="form-title-top">导入提示</div>
            <div class="form-tips">
                {{selectedUploadTypeObject.tips}}
            </div>
        </div>

        <div class="form-item">
            <div class="form-title-top">请选择需要导入的文件</div>
            <div>
                <Upload :action="uploadPath"
                        :on-success="uploadSuccess"
                        :on-error="uploadError"
                         name="file"
                        :data="uploadParam"
                        :max-size="filemaxsize"
                        :on-exceeded-size="handleMaxSize"
                        :format="fileformat"
                        :on-format-error="handleFormatError"
                        :before-upload = "beforUploadAction"
                        :headers="headersObj"
                              ref="uploadComp"
                >
                    <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
                </Upload>
            </div>
        </div>

        <div class="form-item">
            <div class="form-title-left">重复数据</div>
            <div class="form-input-left padding_top_5" >
                <RadioGroup v-model="repeatTactics">
                    <Radio label="1">跳过</Radio>
                    <Radio label="2">覆盖</Radio>
                </RadioGroup>
            </div>
        </div>

        <div class="footer-btn-container">
            <Button type="primary" class="nextStep" @click="nextStep">下一步</Button>
            <Button type="warning" class=""  @click="cancelAction">取消</Button>
        </div>
    </div>
</template>

<script>
//    import deepmerge from "deepmerge"
    export default {
        props:{
            // server URL
            serverUrl: {
                type: String,
                default: ''
            },
            uploadTypeObjectArray: {
                type: Array,
                default: function (){
                    return [];
                }
            },
            businessCode:{}
        },
        // 组件初始化执行的代码
        mounted: function () {
            this.setDefaultTypeObject();
            this.headersObj = {
                token: window.localStorage.getItem("token")
            };
        },
        data: function (){
            var that = this;
            return {
                uploadPath: that.serverUrl + "/cpsFimBusinessfileparam/importFile",
                // 上传文件列表
                uploadTypeObjectList:{},
                //最大上传文件size
                filemaxsize:0,
                //上传文件的格式
                fileformat:[],
                headersObj:{
                    token: ""
                },
                // 选中的上传对象
                selectedUploadTypeObject: {
                    "createdBy": null,
                    "createTime": null,
                    "modifiedBy": null,
                    "modifyTime": null,
                    "remark": "",
                    "active": null,
                    "fileruleId": "",
                    "busiCode": "",
                    "fileFormat": "txt",
                    "filesizeSynLimit": 0,
                    "filesizeLimit": 0,
                    "fileheadSize": 0,
                    "filetailSize": 0,
                    "paramSeparator": "",
                    "tips": "",
                    "templatePath": null,
                    "fileExtension": ""
                },
                // 重复策略  ——  1：跳过 2：覆盖
                repeatTactics: 1,
                // 选择的文件类型
                fileTypeValue: "",

            }
        },
        computed: {
            // 下载
            "downloadUrl":function () {
                var downloadUrlStr = this.serverUrl + "/cpsFimBusinessfileparam/downFile/" + this.fileTypeValue+"?token="+window.localStorage.getItem("token");
                return downloadUrlStr;
            },
            // 上传文件传递的参数
            "uploadParam": function () {
                var that = this;
                return {
                    fileruleId : that.fileTypeValue,
                    repetingProcessmode: that.repeatTactics,
                }
            },
        },
        methods: {
            /**
             * 切换选择文件的类型
             * */
            changeFileType: function (selectedValue) {
                this.fileTypeValue = selectedValue;
                this.selectedUploadTypeObject = this.uploadTypeObjectList[selectedValue];
                //设置文件的上传格式
                if((this.selectedUploadTypeObject.fileExtension.toLocaleLowerCase().indexOf("xls")===-1)&&(this.selectedUploadTypeObject.fileExtension.toLocaleLowerCase().indexOf("xlsx")===-1)){
                    this.fileformat=["txt"];
                }else{
                    this.fileformat=["xls","xlsx"];
                }
            },
            /**
             * 将传递过来的数组转为JSON独享，key是 fileruleId 来决定
             * 默认选择第一个上传对象
             * */
            setDefaultTypeObject: function () {
                // 克隆组件传入进来的数组对象
                var length = this.uploadTypeObjectArray.length;
                var result = {};
                for(var i = 0; i < length; i++){
                    var tempObj = this.uploadTypeObjectArray[i];
                    // 用来缓存第一个key的值
                    if(i == 0){
                        this.fileTypeValue = tempObj.fileruleId;
                    }
                    result[tempObj.fileruleId] = tempObj;
                }
                this.uploadTypeObjectList = result;
                // 默认选中第一个上传文件类型
                this.selectedUploadTypeObject = this.uploadTypeObjectList[this.fileTypeValue];
                //文件最大
//                console.log("文件大小："+this.selectedUploadTypeObject.filesizeLimit);
                //数据库存的单位是M 前端上传的控件是1024
                this.filemaxsize=this.selectedUploadTypeObject.filesizeLimit*1024;

                //设置文件的上传格式
                if((this.selectedUploadTypeObject.fileExtension.toLocaleLowerCase().indexOf("xls")===-1)&&(this.selectedUploadTypeObject.fileExtension.toLocaleLowerCase().indexOf("xlsx")===-1)){
                    this.fileformat=["txt"];
                }else{
                    this.fileformat=["xls","xlsx"];
                }
            },
            beforUploadAction: function(){
                this.headersObj = {
                    token: window.localStorage.getItem("token")
                };
                // 清除列表显示
                this.$refs.uploadComp.clearFiles();
            },
            // 上传文件成功
            uploadSuccess: function (response, file, fileList) {
                var successData = response.data;
                if(successData==undefined || successData==null){
                    this.$emit("meassage-cuting",response.message,4);
                    return;
                }
                // 添加 规则ruleId
                successData["fileruleId"] = this.fileTypeValue;
                this.$emit("upload-file-success",successData);
            },
            // 上传文件失败
            uploadError: function (error, file, fileList) {
            },
//            下一步按钮触发事件
            nextStep: function () {
                // 传递参数 —— 重复策略 和 文件扩展名
                this.$emit("next-step",this.repeatTactics,this.selectedUploadTypeObject.fileExtension);
            },
//            取消按钮触发的事件
            cancelAction: function () {
                this.$emit("cancel");
            },
            //处理超出文件提示
            handleMaxSize:function(file) {
                this.$emit("meassage-cuting","超出了文件大小，最多能上传"+this.selectedUploadTypeObject.filesizeLimit+"M",3);
            }
            ,
            //处理上传错误的文件的提示
            handleFormatError:function(file) {
                this.$emit("meassage-cuting","请上传正确的文件格式"+this.selectedUploadTypeObject.fileFormat,3);
            }
        },
        watch: {
            // 监听父级组件传递过来的值
            uploadTypeObjectArray: function (newValue, oldValue) {
                this.uploadTypeObjectArray = newValue;
                this.setDefaultTypeObject();
            },
        },
        components:{

        }
    }
</script>

<style lang="scss">
.zlst-components-uploadFile-uploadFirstStep{
    /*一个表单输入项——包含 标签和表单*/
    .form-item{
        margin: 15px 0;
        /*表单的标题*/
        .form-title-left{
            float: left;
            width: 120px;
            font-size: 14px;
            line-height: 28px;
        }
        .form-input-left{
            margin-left: 120px;
        }
        .padding_top_5{
            padding-top:5px;
        }
        .select-type{
            width: 200px;
        }
        /*表单的提示信息*/
        .form-title-top{
            font-size: 14px;
            line-height: 28px;
        }
    }

    .footer-btn-container{
        text-align: center;
        .nextStep{
            margin-right: 10px;
        }
    }

}
</style>
